<template>
	<div class="video">
		<!-- 页面标题 start -->
		<div class="video-title">视频</div>
		<!-- 页面标题 end -->

		<!-- 视频分类 start -->
		<div class="video-classify">
			<el-row>
				<el-col
					:span="4"
					v-for="item of videoClassify"
					:key="item.channel_id"
				>
					<div
						class="btn"
						:class="{ 'is-active': item.isActive }"
						@click="handleTab(item.channel_id)"
					>
						{{ item.name }}
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- 视频分类 end -->

		<!-- 分类下的视频 start -->
		<el-row class="videos" v-if="videos.length !== 0">
			<el-col
				:xs="8"
				:sm="8"
				:md="8"
				:lg="4"
				v-for="(item, index) of videos"
				:key="item.videoid"
			>
				<div
					class="video-item"
					@click="
						targetvideoDetails(
							item.hd_hash ? item.hd_hash : item.mvhash
						)
					"
				>
					<div class="video-img">
						<img :src="item.img" alt="" />
						<div class="fill-screen">
							<i>&#xe627;</i>
						</div>
					</div>
					<div class="video-name" v-if="index <= 2">
						<em></em>
						<span>{{
							item.description ? item.description : item.title
						}}</span>
					</div>
					<div class="video-name" v-else>
						<i>{{ index + 1 }}.</i>
						<span>
							{{
								item.description ? item.description : item.title
							}}</span
						>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- <el-row v-else>
			改分类下暂时没有视频
		</el-row> -->
		<!-- 分类下的视频 end -->
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 视频分类
			videoClassify: [],
			// 视频列表
			videos: [],
		};
	},
	methods: {
		// 获取视频分类
		getVideoClassify() {
			this.axios
				.get("/api-video/recommend_channel?version=9108&plat=0&type=2")
				.then((res) => {
					res.data.data.list.forEach((item) => {
						item.id = item.channel_id;
						if (item.channel_id == 54) {
							item.isActive = true;
						} else {
							item.isActive = false;
						}
					});
					this.videoClassify = res.data.data.list;
				});
		},
		// 获取初始的视频分类下的视频
		getVideosList() {
			this.axios
				.get(
					"/api-video//list?version=9108&plat=0&pagesize=20&id=54&page=1&sort=4&short=0"
				)
				.then((res) => {
					res.data.data.info.forEach((item) => {
						item.img = item.img.replace(/\/{size}/, "");
					});
					this.videos = res.data.data.info;
				});
		},
		// 点击切换获取列表下的视频
		getVideos(id) {
			this.videos = [];
			this.axios
				.get(
					`/api-video//list?version=9108&plat=0&pagesize=20&id=${id}&page=1&sort=4&short=0`
				)
				.then((res) => {
					res.data.data.info.forEach((item) => {
						item.img = item.img.replace(/\/{size}/, "");
					});
					this.videos = res.data.data.info;
				});
		},
		// 切换选项卡
		handleTab(id) {
			this.videoClassify.forEach((item) => {
				if (id == item.id) {
					item.isActive = true;
				} else {
					item.isActive = false;
				}
			});
			this.getVideos(id);
		},
		// 跳转到视频的详情页
		targetvideoDetails(videohash) {
			sessionStorage.setItem("videohash", videohash);
			this.$router.push(`/videoDetails/${videohash}`);
		},
	},
	mounted() {
		this.getVideoClassify();
		this.getVideosList();
	},
};
</script>
<style lang="scss">
.video {
	.video-title {
		font-size: 25px;
		font-weight: 700;
	}
	// 视频分类 start
	.video-classify {
		margin-top: 20px;
		.el-row {
			.el-col {
				margin: 7px 0;
				.btn {
					cursor: pointer;
					width: 90%;
					padding: 15px 0;
					text-align: center;
					font-size: 14px;
					color: #333;
					border-radius: 22px;
					background-color: #f7f7f7;
					&:hover {
						color: #5192fe;
						background-color: #e3e3e3;
					}
					&.is-active {
						color: #fff;
						background-image: linear-gradient(
							to right,
							#83b1fe,
							#5292fe
						);
					}
				}
			}
		}
	}
	// 视频分类 end

	// 视频分类下的视频 start
	.videos {
		margin-top: 30px;
		.el-col {
			.video-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 214px;
				cursor: pointer;
				.video-img {
					overflow: hidden;
					position: relative;
					width: 90%;
					height: 140px;
					border-radius: 10px;
					img {
						width: 100%;
						height: 100%;
					}
					.fill-screen {
						display: none;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, 0.4);
						i {
							position: absolute;
							top: calc(50% - 20px);
							left: calc(50% - 20px);
							font-family: "iconfont";
							font-size: 40px;
							color: #fff;
							&:hover {
								color: #5192fe;
							}
						}
					}
					&:hover {
						.fill-screen {
							display: block;
						}
					}
				}
				.video-name {
					display: flex;
					width: 90%;
					margin-top: 20px;
					font-size: 14px;
					i {
						width: 10%;
						color: #858585;
					}
					span {
						width: 90%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						color: #333;
					}
					&:hover {
						i {
							color: #5192fe;
						}
						span {
							color: #5192fe;
						}
					}
					em {
						width: 24px;
						height: 24px;
						margin-right: 5px;
						line-height: 20px;
						text-align: center;
						color: #fff;
						font-size: 12px;
						background: url("../assets/img/singer-first.svg")
							no-repeat;
						background-size: contain;
						transform: translateY(-4px);
					}
				}
			}

			&:nth-child(2) {
				.video-name {
					em {
						background-image: url("../assets/img/singer-second.svg");
					}
				}
			}
			&:nth-child(3) {
				.video-name {
					em {
						background-image: url("../assets/img/singer-third.svg");
					}
				}
			}
		}
	}
	// 视频分类下的视频 end
}
</style>
